<script setup>
import riskTuiShi from './risk-tui-shi.vue';
import riskCaiWu from './risk-cai-wu.vue';
import riskJianChi from './risk-jian-chi.vue';
import riskGuDong from './risk-gu-dong.vue';
import riskWeiGui from './risk-wei-gui.vue';
import riskQiTa from './risk-qi-ta.vue';
import {reactive, ref} from "vue";

const useTag = ()=>{
  const currentTabIndex = ref(0)
  const tabList = ref([
    "退市风险",
    "财务风险",
    "减持风险",
    "股东风险",
    "违规风险",
    "其他风险"
  ])
  const tagClick = (index) =>{
    // console.log(index)
    currentTabIndex.value = index;
  }

  return {
    currentTabIndex,tabList,tagClick
  }
}
const {currentTabIndex,tabList,tagClick} = useTag();
</script>

<template>
  <div class="tagList">
    <van-row :gutter="[10,10]">
      <van-col v-for="(tag,index) in tabList" span="6">
        <div class="tag" @click="tagClick(index)" :class="{'active':index===currentTabIndex}">{{ tag }}</div>
      </van-col>
    </van-row>
    <div class="secondInnerTabs">
      <van-tabs v-model:active="currentTabIndex" animated :show-header="false">
<!--        退市风险、财务风险、减持风险、股东风险、违规风险、其他风险分类-->
        <van-tab><risk-tui-shi/></van-tab>
        <van-tab><risk-cai-wu/></van-tab>
        <van-tab><risk-jian-chi/></van-tab>
        <van-tab><risk-gu-dong/></van-tab>
        <van-tab><risk-wei-gui/></van-tab>
        <van-tab><risk-qi-ta/></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tagList{
  padding:0px 16px 10px 16px;
  .tag{
    border-radius:2px;
    display:flex;
    justify-content: center;
    align-items: center;
    width:80px;
    height:20px;
    font-size:12px;
    background: #F2F2F2;
    color:#9C9D9F;
    &.active{
      background: #333333;
      color:#fff;
    }
  }
}
</style>